<template>
  <div>
    <canvas :id="canvasID" :width="options.width" :height="options.height"></canvas>
  </div>
</template>

<script>
export default {
  props: ['opt'],
  data() {
    return {
      options: {
        type: 'string', // ['+','-','*'], // 加法，减法，乘法随机运算
        range: [1, 20],
        width: 90,
        height: 28,
        background: '#ddd',
        codeSize: 5,
        fontColor: 'random',  //随机色或指定颜色 random
        font: '30px arial',
        line: [10, 35]
      },
      canvasID: '',
      code: null,
      returnCode: null
    }
  },
  created() {
    this.options = { ...this.options, ...this.opt }
    this.canvasID = 'verCode-' + (this._getString(3)).toString(16);
  },
  mounted() {
    this.$nextTick(() => {
      this.display()
    })
  },
  methods: {
    display() {
      var canvas = document.getElementById(this.canvasID),
        _canvas = canvas.getContext('2d');
      // 初始化验证
      this.drawCanvas(_canvas);
    },
    fontColor() {
      if (this.options.fontColor === 'random') {
        return this._randColor()
      } else {
        return this.options.fontColor;
      }
    },

    createLine(_canvas) {
      _canvas.lineWidth = 1;
      for (var i = 0; i < this._rand(this.options.line); i++) {
        _canvas.strokeStyle = this._randColor()
        _canvas.beginPath();
        _canvas.moveTo(this._rand([0, this.options.width]), this._rand([0, this.options.height]));
        _canvas.lineTo(this._rand([0, this.options.width]), this._rand([0, this.options.height]));
        _canvas.stroke();
      }
    },

    createCode() {
      if (this.options.type === 'string') {
        return this.code = this._getString(this.options.codeSize);
      } else {
        var SUB = this._rand(this.options.range),
          SUM = this._randArr(this.options.type),
          MIN = this._rand(this.options.range);
        this.code = SUB + (SUM == '*' ? 'x' : SUM) + MIN;
        return this.returnCode = eval(SUB + SUM + MIN);
      }
    },

    drawCanvas(_canvas) {
      _canvas.fillStyle = this.options.background;
      _canvas.fillRect(0, 0, this.options.width, this.options.height);
      this.createLine(_canvas);
      _canvas.font = this.options.font;
      _canvas.fillStyle = this.fontColor();
      _canvas.textAlign = 'center';
      _canvas.textBaseline = 'middle';
      this.returnCode = this.createCode();
      this.$emit('code', this.returnCode)
      _canvas.fillText(this.code, this.options.width / 2, this.options.height / 2);
    },


    //返回随机生成指定长度的数字字母组合
    _getString(num) {
      var rdmStr = "";
      if (rdmStr.length < num) rdmStr += Math.random().toString(36).substr(2);
      return rdmStr.substr(0, num);
    },
    //返回16进制随机色
    _randColor: function () {
      return "#" + ((Math.random() * (0xFFFFFF).toString(10)).toString(16)).slice(-6);
    },
    //生成指定范围内的随机数
    _rand: function (arr) {
      return Math.floor(Math.random() * (arr[0] - arr[1] + 1)) + arr[1];
    },
    //随机获取数组中某一项
    _randArr: function (arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    },
  }
}
</script>

